<template>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  width: 300px;
  height: 300px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.grid-item-1 {
  // grid-row: 2 / span 2;
  // grid-column: 1 / span 2;
  grid-area: 2/1 / span 2 / span 2;
}
</style>
